<template>
	<div class="d1">
		<!-- 面包屑导航提示 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>信息发布</el-breadcrumb-item>
			<el-breadcrumb-item>待审核</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 中间区域内容 -->
		<el-card>
			<!-- 搜索框 -->
			<div style="width: 100%; display: inline-block; margin-right: 20px; margin-bottom: 20px;">
				标题：<el-input placeholder="标题" v-model="queryInfo.title" class="input-with-select">
				</el-input>
				发布人：<el-input placeholder="发布人" v-model="queryInfo.author" class="input-with-select">
				</el-input>
				
			</div>
			<el-button type="primary" @click="selectNotice">筛选</el-button>
			<el-button type="primary">导出</el-button>
			<el-button type="primary" class="b1" @click=" adddialogFormVisible = true ">发布信息</el-button>
			<!-- 添加对话框 -->
			<el-dialog title="发布信息" :visible.sync="adddialogFormVisible" label-width="80px" @close="addnoticeReset" >
			  <el-form :model="addnotice" ref="addnoticeref" :rules="addnoticerules" >
			    <el-form-item label="标题:" prop="title">
			      <el-input v-model="addnotice.title" autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="内容:" prop="content" >
						<el-input style="width: 80%;"
						  type="textarea"
						  :autosize="{ minRows: 2, maxRows: 4}"
						  placeholder="请输入内容"
						  v-model="addnotice.content">
						</el-input>
			    </el-form-item>
				<el-form-item label="图片:"  prop="img">
					<el-upload
					  action="http://127.0.0.1:8888/upload"
					  list-type="picture-card"
					  :on-preview="uphandlePictureCardPreview"
					  :on-success="uphandleAvatarSuccess"
					  :on-remove="uphandleRemove"
					  :file-list="addnoticelist">
					  <i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="updialogVisible">
					  <img width="100%" :src="updialogImageUrl" alt="">
					</el-dialog>	
				</el-input>
				</el-form-item>
				
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="addnoticeReset">取 消</el-button>
			    <el-button type="primary" @click="addnoticeform">确 定</el-button>
			  </div>
			</el-dialog>
			<!-- 表格数据 -->
			<el-table :data="noticeList" border style="width: 100%">
				<el-table-column prop="title" label="标题">
				</el-table-column>
				<el-table-column prop="content" label="发布内容">
				</el-table-column>
				<el-table-column prop="author" label="发布人">
				</el-table-column>
				<el-table-column prop="status" label="上/下架状态">
					<template slot-scope="scope">
						{{scope.row.status==0?"下架":"上架"}}
					</template>
				</el-table-column>
				<el-table-column prop="createtime" label="创建时间">
				</el-table-column>
				<el-table-column prop="checkstatus" label="审核状态">
					<template slot-scope="scope">
						<el-tag type="warning"  effect="plain" >待审核</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" content="详情" placement="top">
							<el-button type="primary" icon="el-icon-more" size="mini" @click="toshow(scope.row.id)">
							</el-button>
						</el-tooltip>
						
					
						<el-tooltip  class="item" effect="dark" content="审核" placement="top">
							<el-button type="danger" icon="el-icon-edit" size="mini" @click="toedit(scope.row.id)">
							</el-button>
						</el-tooltip>
						<!-- 详情展示 -->
						<el-dialog title="详情" 
						:visible.sync="showdialogFormVisible" 
						@close="shownoticeReset"
						:rules="shownoticerules"
						 label-width="80px" >
						 
						  <el-descriptions class="margin-top" title="详情" :column="1" :size=" 'medium' " border>
						     
						     <el-descriptions-item>
						       <template slot="label">
						         <i class="el-icon-user"></i>
						         标题
						       </template>
						       {{shownotice.title}}
						     </el-descriptions-item>
						     <el-descriptions-item>
						       <template slot="label">
						         <i class="el-icon-mobile-phone"></i>
						         发布人
						       </template>
						       {{shownotice.author}}
						     </el-descriptions-item>
						     <el-descriptions-item>
						       <template slot="label">
						         <i class="el-icon-location-outline"></i>
						         发布时间
						       </template>
						       {{shownotice.createtime}}
						     </el-descriptions-item>
						     <el-descriptions-item>
						       <template slot="label">
						         <i class="el-icon-tickets"></i>
						         内容
						       </template>
						       {{shownotice.content}}
						     </el-descriptions-item>
						     <el-descriptions-item>
						       <template slot="label">
						         <i class="el-icon-office-building"></i>
						         图片
						       </template>
						       <div class="demo-image">
						         <div class="block" style="width: 110px; height: 110px ;display: inline-block;"  v-for="url in urls"  >
						          
						           <el-image
						             style="width: 100px; height: 100px ;display: inline-block;"
						             :src="url"
						             :fit="'contain'"></el-image>
						         </div>
						       </div>
						     </el-descriptions-item>
						   </el-descriptions>
						  <h3> 审核记录</h3>
						 
						  <el-menu
						   class="el-menu-demo"
						    mode="horizontal"
						    background-color="#FAFAFA"
						    text-color="gray"
						   >
						    <el-menu-item style="font-size: 16px; width: 25%; text-align: center;">审核时间</el-menu-item>
							<el-menu-item style="font-size: 16px; width: 25%; text-align: center;">审核结果</el-menu-item>
							<el-menu-item style="font-size: 16px; width: 25%; text-align: center;">审核说明</el-menu-item>
							<el-menu-item style="font-size: 16px; width: 25%; text-align: center;">审核人</el-menu-item>
						  </el-menu>
						<h3> 审核操作</h3>
						<el-form :model="checkForm"  ref="checkFormref" 
						 label-width="100px" class="demo-ruleForm" :rules="shownoticerules">
						 
						  <el-form-item label="审核结果" prop="checkstatus" >
						    <el-radio-group v-model="checkForm.checkstatus" >
						      <el-radio label="1">审核通过</el-radio>
						      <el-radio label="0">审核不通过</el-radio>
						    </el-radio-group>
						  </el-form-item>
						  <el-form-item label="审核说明" prop="desc" >
						    <el-input type="textarea" v-model="checkForm.desc"></el-input>
						  </el-form-item>
						  <el-form-item>
						    <el-button type="primary" @click="shownoticeReset">取消</el-button>
						    <el-button @click="editcheckform">确定</el-button>
						  </el-form-item>
						</el-form>
						
						</el-dialog>
						
						<!-- 审核对话框 -->
						<el-dialog title="发布信息" :visible.sync="editdialogFormVisible"
						 label-width="80px" @close="shownoticeReset"  >
						  <h3> 审核操作</h3>
						  <el-form :model="checkForm"  ref="checkFormref" 
						   label-width="100px" class="demo-ruleForm" :rules="shownoticerules">
						   
						    <el-form-item label="审核结果" prop="checkstatus" >
						      <el-radio-group v-model="checkForm.checkstatus" >
						        <el-radio label="1">审核通过</el-radio>
						        <el-radio label="0">审核不通过</el-radio>
						      </el-radio-group>
						    </el-form-item>
						    <el-form-item label="审核说明" prop="desc" >
						      <el-input type="textarea" v-model="checkForm.desc"></el-input>
						    </el-form-item>
						    <el-form-item>
						      <el-button type="primary" @click="shownoticeReset">取消</el-button>
						      <el-button @click="editcheckform">确定</el-button>
						    </el-form-item>
						  </el-form>
						  
						</el-dialog>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<!-- 
				current-page：当前页
				page-sizes：可以选择的每页条数
				layout：要展示的分页的组件
				total：总条数
				@size-change：每页展示的条数发生改变，调用的函数
				@current-change：当前页发生改变时调用的函数
			-->
			<div class="block">
				<el-pagination 
				@size-change="handleSizeChange" 
				@current-change="handleCurrentChange"
					:current-page="queryInfo.pageNum" 
					:page-sizes="[3,4,5]"
					 :page-size="queryInfo.pageSize"
					layout="total, sizes, prev, pager, next, jumper" 
					:total="queryInfo.total">
				</el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 搜索的对象
				queryInfo: {
					title: '',
					author: '',
					pageNum: 1,
					pageSize: 3,
					total: 0,
					//默认待审核2
					checkstatus:2,
				},
				checkForm:{
					checkstatus:'',
					desc:''
				},
				shownoticerules:{
					checkstatus: [
					            { required: true, message: '请选择活动资源', trigger: 'change' }
					          ],
					desc: [
					            { required: true, message: '请填写活动形式', trigger: 'blur' }
					        ]
				},
				addnotice:{
					
					title: '',
					content:'',
					author: '',
					img:'',
				},
				addnoticerules:{
					title: [
					            { required: true, message: '请输入标题名', trigger: 'blur' },
					            
					          ],
					content: [
					            { required: true, message: '请输入内容', trigger: 'blur' },
					            
					          ],
					img: [
					            { required: true, message: '请输入图片', trigger: 'blur' },
					            
					          ],
				},
				editnotice:{
					id:'',
					title: '',
					content:'',
					author: '',
					img:'',
				},
				shownotice:{
					id:'',
					title: '',
					content:'',
					author: '',
					createtime:'',
					img:'',
					
				},
				noticeList:[],
				value1:'',
				adddialogFormVisible:false,
				updialogVisible:false,
				addnoticelist:[],
				updialogImageUrl:'',
				editnoticelist:[],
				editdialogImageUrl : '',
				editdialogVisible : false,
				editdialogFormVisible:false,
				showdialogFormVisible:false,
				urls:[],
			}
		},
		mounted() {
			this.selectNotice();
		},
		methods:{
			selectNotice(){
				let param = new URLSearchParams();
				param.append('title',this.queryInfo.title);
				param.append('checkstatus',this.queryInfo.checkstatus);
				param.append('author',this.queryInfo.author);
				param.append('pageNum',this.queryInfo.pageNum);
				param.append('pageSize',this.queryInfo.pageSize);
				this.$http.post('selectnotices',param).then(res =>{
					if(res.data.code == 200){
						this.noticeList = res.data.data.list;
						this.queryInfo.total = res.data.data.total;
						this.queryInfo.pageNum = res.data.data.pageNum;
						this.queryInfo.pageSize = res.data.data.pageSize;
					}else{
						this.$message.error(res.data.msg)
						this.noticeList='';
					}
				})
			},
			handleSizeChange(val){
				this.queryInfo.pageNum=1;
				this.queryInfo.pageSize = val;
				this.selectNotice();
				
			},
			handleCurrentChange(val){
				this.queryInfo.pageNum = val;
				//this.queryInfo.pageSize= 3;
				this.selectNotice();
			},
			uphandlePictureCardPreview(file) {
			        this.updialogImageUrl = file.url;
			        this.updialogVisible = true;
			},
			uphandleRemove(file, fileList){
				console.log(file.response.msg)
				console.log(fileList)
				this.addnoticelist= [];
			},
			uphandleAvatarSuccess(res, file){
				if(res.code==200){
					if (this.addnotice.img== '') {
						this.addnotice.img = res.msg;
					}else{
						this.addnotice.img=this.addnotice.img +','+ res.msg;
					}
					
				}
			},
			addnoticeReset(){
				this.$refs['addnoticeref'].resetFields();
				this.addnoticelist= [];
				this.updialogImageUrl = '';
				
				this.adddialogFormVisible = false;
			},
			addnoticeform(){
				 this.$refs['addnoticeref'].validate((valid) => {
				          if (valid) {
				            console.log(this.addnotice.img)
							let param = new URLSearchParams();
							param.append('title',this.addnotice.title);
							param.append('author',this.addnotice.author);						
							param.append('content',this.addnotice.content);
							param.append('img',this.addnotice.img);
							this.$http.post("addnotice",param).then(res =>{
								if(res.data.code == 200){
									this.$refs['addnoticeref'].resetFields();
									this.addnoticelist= [];
									this.adddialogFormVisible = false;
									this.queryInfo.pageNum=1;
									this.queryInfo.pageSize=3;
									this.updialogImageUrl = '';
									this.selectNotice();
								}
							})
				          } else {
				            console.log('error submit!!');
				            return false;
				          }
				        });
			},
			editnoticeReset(){
				//this.$refs['editnoticeref'].resetFields();
				this.editnoticelist= [];
				this.editdialogImageUrl = '';
				this.editdialogFormVisible = false;
			},
			edithandlePictureCardPreview(file){
				this.editdialogImageUrl = file.url;
				this.editdialogVisible = true;
			},
			edithandleAvatarSuccess(res, file){
				if(res.code==200){
					if (this.editnotice.img== '') {
						this.editnotice.img = res.msg;
					}else{
						this.editnotice.img=this.editnotice.img +','+ res.msg;
					}
					
				}
			},
			edithandleRemove(file, fileList){
				console.log(file)
				console.log(fileList)
				this.addnoticelist = [];
			},
			toedit(id){
				
				
				
				this.editnoticelist = [];
				this.editdialogFormVisible = true;
				this.$http.get("selectNoticeById/"+id).then(res =>{
					if(res.data.code==200){
						this.shownotice = res.data.data;
						var s = this.editnotice.img.split(',')
						//console.log(s)
						for(var i = 0; i < s.length; i++) {
							//console.log(s[i]);
							var in1 = {
								name:s[i],
								url:"http://127.0.0.1:8888/showImg?filename="+s[i]
								};
							this.editnoticelist.push(in1);						
						}
					}
				})
				
			},
			editnoticeform(){
				
			},
			editcheckform(){
				
				this.$refs['checkFormref'].validate((valid) => {
				         if (valid) {
				           // console.log(this.checkForm.checkstatus) param.append('checktime',new Date());
											let param = new URLSearchParams();
											param.append('id',this.shownotice.id);
											param.append('checkstatus',this.checkForm.checkstatus);
											param.append('desc',this.checkForm.desc);
											param.append('checkby',window.sessionStorage.getItem("user"));
											this.$http.post("updateNoticeCheck",param).then(res =>{
												if(res.data.code == 200){
													this.$refs['checkFormref'].resetFields();
													this.editnoticelist = [];
													this.showdialogFormVisible = false;
													this.editdialogFormVisible = false;
													this.queryInfo.pageNum=1;
													this.queryInfo.pageSize=3;
													
													this.selectNotice();
													
												}
											})
				         } else {
				           console.log('error submit!!');
				           return false;
				         }
				       });
			},
			shownoticeReset(){
				this.checkForm.checkstatus= '';
				this.checkForm.desc='';
				this.urls=[];
				this.showdialogFormVisible =false;
				this.editdialogFormVisible = false;
			},
			toshow(id){
				this.urls=[];
				this.showdialogFormVisible =true;
				this.$http.get("selectNoticeById/"+id).then(res =>{
					if(res.data.code==200){
						this.shownotice = res.data.data;
						var s = this.shownotice.img.split(',')
						//console.log(s)
						for(var i = 0; i < s.length; i++) {
							console.log(s[i]);
							let url="http://127.0.0.1:8888/showImg?filename="+s[i];
								console.log(url)
							this.urls.push(url);						
						}
					}
				})
			},
			updateNoticeStatus(status,id){
				let mess=(status==0?"上架":"下架") 
				 this.$confirm('此操作将进行'+mess+', 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				          let param = new URLSearchParams();
				          param.append("id",id);
				          param.append("status",status);
				          this.$http.post("updateNoticeStatus",param).then(res =>{
				          	if(res.data.code==200){
				          		this.$message.success(res.data.msg);
								this.queryInfo.pageNum=1;
								this.queryInfo.pageSize=3;
				          		this.selectNotice();
				          	}else{
								this.$message.error(res.data.msg);
								this.queryInfo.pageNum=1;
								this.queryInfo.pageSize=3;
								this.selectNotice();
							}
				          })
						  
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消'+mess
				          });          
				        });
				
				
				
			},
		}
	}
</script>

<style scoped>
	.el-card {
		margin-top: 15px;
		text-align: left;
		padding: 20px;
	}
	
	.el-input {
		display: inline-block;
		width: 240px;
		margin-right: 50px;
	}
	
	.el-table {
		margin-top: 20px;
	}
	.b1{
		float: right;
	}
</style>